import { Suspense, lazy } from 'react';
import { Navigate, Outlet } from 'react-router-dom';

import { SvgIcon } from '@/components/icon';
import { CircleLoading } from '@/components/loading';

import { AppRouteObject } from '#/router';

const CouponPage = lazy(() => import('@/pages/operate/coupon'));
const CouponLibPage = lazy(() => import('@/pages/operate/couponLib'));
const BannerPage = lazy(() => import('@/pages/operate/banner'));
const AreaPage = lazy(() => import('@/pages/operate/area'));
const ExpressPage = lazy(() => import('@/pages/operate/express'));
const FreightPage = lazy(() => import('@/pages/operate/freight'));
const NoticePage = lazy(() => import('@/pages/operate/notice'));
const PropertyePage = lazy(() => import('@/pages/operate/property'));
const PropertyEditorPage = lazy(() => import('@/pages/operate/property/editor'));
const BasePage = lazy(() => import('@/pages/operate/base/index'));
const ArticlePage = lazy(() => import('@/pages/operate/articles/index'));

const operate: AppRouteObject = {
  order: 2,
  path: 'operate',
  element: (
    <Suspense fallback={<CircleLoading />}>
      <Outlet />
    </Suspense>
  ),
  meta: {
    label: '运营管理',
    icon: <SvgIcon icon="ic-management" className="ant-menu-item-icon" size="24" />,
    key: '/operate',
  },
  children: [
    {
      index: true,
      element: <Navigate to="coupon" replace />,
    },
    {
      path: 'coupon',
      element: <CouponPage />,
      meta: { label: '优惠券管理', key: '/operate/coupon' },
    },
    {
      path: 'couponLib',
      element: <CouponLibPage />,
      meta: { label: '券码管理', key: '/operate/couponLib' },
    },
    {
      path: 'notice',
      element: <NoticePage />,
      meta: { label: '通知管理', key: '/operate/notice' },
    },
    {
      path: 'property',
      element: <PropertyePage />,
      meta: { label: '站点配置', key: '/operate/property' },
    },
    {
      path: 'property/editor',
      element: <PropertyEditorPage />,
      meta: { label: '网站属性', key: '/operate/property/editor', hideMenu: true },
    },
    {
      path: 'banner',
      element: <BannerPage />,
      meta: { label: '轮播管理', key: '/operate/banner' },
    },
    {
      path: 'area',
      element: <AreaPage />,
      meta: { label: '区域管理', key: '/operate/area' },
    },
    {
      path: 'express',
      element: <ExpressPage />,
      meta: { label: '配送方式', key: '/operate/express' },
    },
    {
      path: 'freight',
      element: <FreightPage />,
      meta: { label: '运费模版', key: '/operate/freight' },
    },
    {
      path: 'base',
      element: <BasePage />,
      meta: { label: '基础属性管理', key: '/operate/base'},
    },
    {
      path: 'article',
      element: <ArticlePage />,
      meta: { label: '底部文章管理', key: '/operate/article'},
    }
  ],
};

export default operate;
